<template>
<!--  基本信息-->
    <div class="info">
       <div class="title">最新采样结果</div>
      <el-row justify="space-around">
        <el-col :span="8">
          <span class="label">核酸结果:</span>
          <span class="value">{{tableData.length!==0?tableData[0].state:''}}</span>
        </el-col>
        <el-col :span="8">
          <span class="label">采集时间:</span>
          <span class="value">{{tableData.length!==0?tableData[0].cyTime:''}}</span>
        </el-col>
        <el-col :span="8">
          <span class="label">采集地点:</span>
          <span class="value">{{tableData.length!==0?tableData[0].censusAddress:''}}</span>
        </el-col>
      </el-row>
      <el-row justify="space-around">
        <el-col :span="8"></el-col>
        <el-col :span="8">
          <span class="label">检测时间:</span>
          <span class="value">{{tableData.length!==0?tableData[0].sendTime:''}}</span>
        </el-col>
        <el-col :span="8">
          <span class="label">检测机构:</span>
          <span class="value">{{tableData.length!==0?tableData[0].laboratory:''}}</span>
        </el-col>
      </el-row>
    </div>
<!--  表格-->
<!--  <div>
      <div class="title">仅七天采样结果</div>
      <el-row v-for="(item,index) in tableData" :key="index">
        <el-col :span="4">
          <span class="label">核酸结果:</span>
          <span class="value">{{item.state}}</span>
        </el-col>
        <el-col :span="5">
          <span class="label">采集时间:</span>
          <span class="value">{{item.cyTime}}</span>
        </el-col>
        <el-col :span="5">
          <span class="label">采集地点:</span>
          <span class="value">{{item.censusAddress}}</span>
        </el-col>
        <el-col :span="5">
          <span class="label">检测时间:</span>
          <span class="value">{{item.sendTime}}</span>
        </el-col>
        <el-col :span="5">
          <span class="label">检测机构:</span>
          <span class="value">{{item.laboratory}}</span>
        </el-col>
      </el-row>
    </div>-->
    <div class="line">
      <div style="flex: 0.5">核酸结果</div>
      <div style="flex: 1">采集时间</div>
      <div style="flex: 1">采集地点</div>
      <div style="flex: 1">检测时间</div>
      <div style="flex: 1">检测机构</div>
    </div>
    <div class="table_body" ref="tableList" id="tableList">
      <div
        :class="{line:true,lineColor: index % 2 === 1 }"
        v-for="(item, index) in tableData"
        :key="index"
        ref="tableRef"
      >
        <div style="flex: 0.5;">
          {{ item.state }}
        </div>
        <div style="flex: 1">
          {{ item.cyTime }}
        </div>
        <div style="flex: 1" class="overLine">
          <el-tooltip
            class="box-item"
            effect="dark"
            :disabled="item.censusAddress.length<17"
            :content="item.censusAddress"
            placement="top"
          >
             {{ item.censusAddress }}
          </el-tooltip>
        </div>
        <div style="flex: 1">
          {{item.sendTime}}
        </div>
        <div style="flex: 1" class="overLine">
          <el-tooltip
            class="box-item"
            effect="dark"
            :disabled="item.laboratory.length<17"
            :content="item.laboratory"
            placement="top"
          >
            {{ item.laboratory }}
          </el-tooltip>
        </div>
      </div>
    </div>
</template>

<script>
import { nextTick } from "vue";

export default {
  name: "nucleicAcid",
  props:{
    param:{
      type:Array,
      default:()=>[]
    }
  },
  watch:{
    param:{
      deep:true,
      immediate:true,
      handler:function(val){
        if (val!==undefined){
          this.tableData=val
        }
      }
    }
  },
  data(){
    return{
      tableData:[]
    }
  },
  mounted() {
    this.autoScroll();
  },
  methods:{
     autoScroll() {
       // document.querySelector("#tableList");
      // const el = document.querySelector("#tableList");
      const el = this.$refs.tableList
      const elHeight = el.offsetHeight;
      const sHeight = el.scrollHeight;
      setInterval(() => {
        if (el.scrollTop < sHeight - elHeight) {
          el.scrollTop++;
        } else {
          el.scrollTop = 0;
        }
      }, 50);
    }
  }
};
</script>

<style lang="less" scoped>
.info{
  margin-bottom: 20px;
}
.title{
  font-size: 18px;
  font-family: Source Han Sans CN,serif;
  font-weight: bold;
  line-height: 28px;
  color: #10F3FC;
  opacity: 1;
}
 .label{
   font-size: 18px;
   font-family: Source Han Sans CN,serif;
   font-weight: 400;
   line-height: 40px;
   color: #FFFFFF;
   opacity: 0.6;
   margin-right: 5px;
 }
 .value{
   font-size: 18px;
   font-family: Source Han Sans CN,serif;
   font-weight: 400;
   line-height: 40px;
   color: #FFFFFF;
   opacity: 1;
 }
.table_icon{
  margin-right: 10px;
}
.line {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  font-size: 18px;
  color: #FFFFFF;
  opacity: 0.6;
  div {
    text-align: center;
    color:#FFFFFF
  }
}
.table_body{
  .line{
    font-size: 18px;
    opacity: 0.8 !important;
  }
}
.lineColor {
  background-color: #2a64b1;
}
.overLine{
  overflow:hidden;
  white-space: nowrap;
  word-break:break-all;
  word-wrap:break-word;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}
.table_body{
  height: 280px;
  overflow: auto;
}
</style>
